<template>
  <div>
    <van-nav-bar title="文章列表" left-arrow   @click-left="onClickLeft"/>
    <div class="info">
      <div class="info_items">
        <div class="info_item" @click="pushRequirePage(item.article_id)" v-for="(item,index) in article" :key="index">
            <div class="info_item_view">
              <div class="info_item_view_text">{{item.article_title}}</div>
              <span>{{item.created_at | createdFilter}}</span>
            </div>
          <div class="info_item_img">
            <img :src="item.front_cover.host+'/'+item.front_cover.relative_path">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {article} from '@/api/article'
export default {
  data(){
    return {
      article:[],
    }
  },
  created(){
    this.getArticle()   
  },
  filters:{
    createdFilter(value){
      return value.substring(0,10);
    }
  },
  methods:{
    onClickLeft(){
      this.$router.go(-1);
    },
    getArticle(){
      article(0).then(res=> {
        this.article = res.data.list;
      })
    },
    pushRequirePage(id){
      this.$router.push(`/home/require?q=${id}`)
    },
  },
}
</script>

<style lang="less">
.van-nav-bar__arrow {
    margin-right: 4px;
    font-size: 25px;
  }
  .van-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 20px;
  }
  .van-nav-bar .van-icon {
    color: #151515;
  }
.info_text {
  margin:  10px auto;
  width: 85%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  span {
    color: rgba(16, 16, 16, 100);
    font-size: 20px;
    text-align: left;
    font-family: PingFangSC-regular;
    // margin-left: 35px;
  }
}
.info_items{
  margin: 10px auto;
  width: 85%;
  height: 300px;
  margin-bottom: 50px;
  // border: 1px solid red;
  .info_item{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 90px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid rgb(209, 209, 209);
    // background-color: rgb(255, 255, 255);
    border-radius: 10px 10px 10px 10px;
    .info_item_view{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 60%;
      height: 100%;
      margin-top: 5px;
      // border: 1px solid blue;
      margin-left: 0px;
      .info_item_view_text{
        color: rgba(16, 16, 16, 100);
        font-size: 18px;
        // text-align: left;
        font-family: PingFangSC-light;
                overflow:hidden; 
        text-overflow:ellipsis;
        display:-webkit-box; 
    /* autoprefixer: off */
        -webkit-box-orient:vertical;
        -webkit-line-clamp:3; 
        word-break:break-all;
      }
      span {
        // margin-top: 10px;
        margin-bottom: 10px;
        color: rgba(16, 16, 16, 100);
        font-size: 14px;
        text-align: left;
        font-family: PingFangSC-extraLight;
      }
    }
    .info_item_img{
      margin-right: 5px;
      margin-top: 5px;
      img {
        width: 120px;
        height: 80px;
        border-radius: 10px 10px 10px 10px;
      }
    }
  }
}
</style>